<template>
  <template v-if="controller.state.visible">
    <view :id="controller.state.teleportTag" :class="classArr" :style="tempStyle"></view>
  </template>
</template>

<script setup lang="ts">
import { IPanelRawItem } from '@ibiz/model-core'
import { computed, ref } from 'vue'
import { useNamespace } from '@/use'
import { TeleportPlaceholderController } from './i-biz-teleport-placeholder.controller'

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelRawItem>,
    required: true,
  },
  controller: {
    type: Object as PropType<TeleportPlaceholderController>,
    required: true,
  },
})

// 获取命名空间和相关变量
const ns = useNamespace('teleport - placeholder')
const tempStyle = ref('')
if (props.modelData.rawItem && props.modelData.rawItem.cssStyle) {
  tempStyle.value = props.modelData.rawItem.cssStyle
}

// 计算类名数组
const classArr = computed(() => {
  const { id } = props.modelData
  const result: Array<string | false> = [ns.b(), ns.m(id)]
  result.push(...props.controller.containerClass)
  return result
})
</script>
<style lang="less">
@import './i-biz-teleport-placeholder.scss';
</style>
